<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, onBeforeRouteLeave } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Back } from '@element-plus/icons-vue'	//导入Search图标
const router = useRouter();
const { currentRoute } = useRouter();
import moment from 'moment'
const $moment = moment
import { treesSurveyInfo } from '@/utils/api.js'
import openLayers from "@/components/common/openlayer.vue"

const ols = ref(null);

const odb = ref({})

const ivlist = ref([]);

import gsmn from '@/assets/icon/gushumingmuanimal_anchor_bottom_center.png'

const getdetail = async () => {
    let res = await treesSurveyInfo(currentRoute.value.query.id);
    if (res.code == '200') {
        let e = res.data.survey;
        odb.value = res.data.survey;
        ivlist.value = res.data.mediaData;
        ols.value.previewshape([{
            id: e.id,
            name: e.keywords,
            borderColor: "",
            fillColor: "",
            iconSrc: gsmn,
            data: {},
            geojson: { coordinates: [e.lon, e.lat], type: "Point" }
        }], 'ceshi001')

        let arrs = [];
        res.data.trackData.forEach(e => {
            arrs.push([e[0], e[1]])
        })
        if (res.data.trackData.length > 0) {
            let z = [
                {
                    id: "00188919",
                    name: "",
                    borderColor: "#0078ff",
                    fillColor: "#0078ff",
                    data: {},
                    geojson: { coordinates: arrs, type: "LineString" }
                }
            ]
            ols.value.previewshape(z, 'line001')
        }
    } else {
        ElMessage({
            type: 'warning',
            message: res.msg,
        })
    }

}

const goback = () => {
    router.go(-1)
};

onMounted(() => {

    getdetail();
})

defineExpose({
    $moment
})

onBeforeRouteLeave((to, from, next) => {
    let oldPath = to.path;
    let newPath = from.path;
    if (oldPath != '/history/otws') {
        window.sessionStorage.removeItem('hisotws');
    }
    next()
});
</script>
<template>
    <div>
        <div class="ha-title addt">
            <div>古树名木调查详情</div>
            <el-button @click.stop="goback" size="large" :icon="Back">返回</el-button>
        </div>
        <div class="ftc" style="padding: 0;">
            <open-layers ref="ols"></open-layers>

            <div class="ftc-d-list">
                <div class="t-message">
                    <div class="fls">
                        <div>巡护人员</div>
                        <div>{{ odb.workUser }}</div>
                    </div>
                    <div class="fls">
                        <div>调查时间</div>
                        <div>{{ odb.recordTime }}</div>
                    </div>
                    <div class="fls">
                        <div>调查里程</div>
                        <div>{{ odb.patrolDistance }}km</div>
                    </div>
                    <div class="fls">
                        <div>物种名称</div>
                        <div>{{ odb.keywords }}</div>
                    </div>
                    <div class="fls">
                        <div>发现位置</div>
                        <div>{{ odb.lon }}~{{ odb.lat }}</div>
                    </div>
                </div>
                <div class="fls" style="border: none;">
                    <div>照片/视频</div>
                </div>
                <div class="tww">
                    <div v-for="(item, index) in ivlist">
                        <el-image v-if="item.type == 'image'" style="width: 100%; height: 100%" :src="item.path"
                            :zoom-rate="1.2" :preview-src-list="[item.path]" />
                        <video v-if="item.type == 'video'" :src="item.path" controls></video>
                    </div>
                </div>
                <div class="fls">
                    <div>名称</div>
                    <div>{{ odb.keywords }}</div>
                </div>
                <div class="fls">
                    <div>古树编号</div>
                    <div>{{ odb.serialNumber }}</div>
                </div>
                <div class="fls">
                    <div>古树等级</div>
                    <div>{{ odb.level }}</div>
                </div>
                <div class="fls">
                    <div>树龄</div>
                    <div>{{ odb.age }}</div>
                </div>
                <div class="fls">
                    <div>当前物候期</div>
                    <div>{{ odb.phenology }}</div>
                </div>
                <div class="fls">
                    <div>当前胸径</div>
                    <div>{{ odb.xiongjing }}</div>
                </div>
                <div class="fls">
                    <div>当前树高</div>
                    <div>{{ odb.height }}</div>
                </div>
                <div class="fls">
                    <div>健康状况</div>
                    <div>{{ odb.health }}</div>
                </div>
            </div>
        </div>

    </div>
</template>
<style scoped>
@import '../../assets/css/sdetails.css';
</style>